<template>
  <div class="tool-prices">
    <h2 class="bar-title mb-6">
      <span class="text-gray-1000 text-26 font-semibold break-words w-full">
        {{$t('deatil_aiPlan',{toolName: toolName})}}
      </span>
    </h2>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"
      :class="{'prices-flex': pricing && pricing.length < 3}">
      <div class="relative rounded-lg border border-gray-1600 bg-white px-6 py-5 price-item"
        v-for="(item, key) in pricing"
        :key="`ai-prices-${key}`">
        <p class="text-2xl font-medium text-gray-1800 mb-2 break-words font-semibold">{{item.name}}</p>
        <p class="text-lg font-medium text-gray-1000 break-words"
          v-if="hasRealVal(item.price)">
          {{item.price}}
        </p>
        <p class="text-base text-gray-1800 mt-7 break-words"
          v-if="hasRealVal(item.description)">{{item.description}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolDetailAiPrices',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    pricing: {
      type: Array,
      default: () => [],
    },
    toolName: {
      type: String,
      default: '',
    },
  },
}
</script>